@extends('admin.public.father')

@section('content')
    <!-- TAB NAVIGATION -->

    <ul class="nav nav-tabs" role="tablist">
        <li><a href="/admin/lesson">课程列表</a></li>
        <li class="active"><a href="/admin/lesson/create">添加课程</a></li>
    </ul>
    <form action="{{route('lesson.store')}}" method="post" class="form-horizontal" role="form">
        @csrf
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">课程管理</h3>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <label class="col-sm-2 control-label">课程名称</label>
                    <div class="col-sm-10">
                        <input type="text" name="title" class="form-control" placeholder="请输入课程名称">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">课程介绍</label>
                    <div class="col-sm-10">
                        <textarea name="introduce" class="form-control" rows="5" style="resize: none;"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">缩略图</label>
                    <div class="col-sm-10">
                        <div class="input-group">
                            <input class="form-control" name="thumb" readonly="" value="">
                            <div class="input-group-btn">
                                <button onclick="upImagePc(this)" class="btn btn-default" type="button">选择图片</button>
                            </div>
                        </div>
                        <div class="input-group" style="margin-top:5px;">
                            <img src="/images/nopic.jpg" class="img-responsive img-thumbnail" width="150">
                            <em class="close" style="position:absolute; top: 0px; right: -14px;" title="删除这张图片"
                                onclick="removeImg(this)">×</em>
                        </div>
                    </div>
                    <script>
                        require(['hdjs']);

                        //上传图片
                        function upImagePc() {
                            require(['hdjs'], function (hdjs) {
                                var options = {
                                    multiple: false,//是否允许多图上传
                                    //data是向后台服务器提交的POST数据
                                    data: {name: '后盾人', year: 2099}
                                };
                                hdjs.image(function (images) {
                                    //上传成功的图片，数组类型
                                    $("[name='thumb']").val(images[0]);
                                    $(".img-thumbnail").attr('src', images[0]);
                                }, options)
                            });
                        }

                        //移除图片
                        function removeImg(obj) {
                            $(obj).prev('img').attr('src', '/images/nopic.jpg');
                            $(obj).parent().prev().find('input').val('');
                        }
                    </script>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">是否推荐</label>
                    <div class="col-sm-10">
                        <label class="radio-inline">
                            <input type="radio" name="is_commend" value="1"> 是
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="is_commend" value="0" checked="checked"> 否
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">是否热门</label>
                    <div class="col-sm-10">
                        <label class="radio-inline">
                            <input type="radio" name="is_hot" value="1"> 是
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="is_hot" value="0" checked="checked"> 否
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">点击数</label>
                    <div class="col-sm-10">
                        <input type="text" name="click" class="form-control" placeholder="请输入点击数...." value="0">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">课程标签</label>
                    <div class="col-sm-10">
                        @foreach($tags as $v)
                            <label class="checkbox-inline">
                                <input type="checkbox" name="tags[]" value="{{$v['id']}}"> {{$v['tname']}}
                            </label>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default" id="apps">
            <div class="panel-heading">
                <h3 class="panel-title">视频管理</h3>
            </div>
            <div class="panel-body">
                <div class="panel panel-default" v-for="(v,k) in videos" >
                    <div class="panel-body">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">视频标题</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" placeholder="请输入视频标题" v-model="v.title">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">链接地址</label>
                            <div class="col-sm-10 container">
                                <input type="text" class="form-control" placeholder="视频地址..." v-model="v.path" style="width: 75%;display: inline-block;" readonly>
                                <button type="button" class="btn btn-default" :id="'s'+v.sid">选择文件
                                </button>
                                <button type="button" class="btn btn-default" :id="'p'+v.sid">开始上传
                                </button>
                                <h1 class="text-center"></h1>
                            </div>
                        </div>
                        <div class="col-sm-2">
                            <button class="btn btn-danger" @click.prevent="del(k)">删除视频</button>
                        </div>
                    </div>
                </div>
                <button class="btn btn-success" @click.prevent="add()">添加视频</button>
            </div>
            <textarea name="videos" hidden cols="30" rows="10">@{{videos}}</textarea>
        </div>
        <div class="form-group">
            <div class="col-sm-10 col-sm-offset-2">
                <button type="submit" class="btn btn-primary">保存数据</button>
            </div>
        </div>
    </form>
    <script>
 new Vue({
     el:'#apps',
     data:{
         videos:[]
     },
     methods: {
         add() {
             //设置添加的对象数据
             var video = {title: '', path: '', sid: new Date().getTime()};
             this.videos.push(video);
             //调用一下oss方法
             oss(video);
         },
         del(k) {
             //将videos中的第k条开始删除一个
             this.videos.splice(k, 1);
         }
     }
 });

        //将oss的js变成一个方法
        function oss(video) {
            require(['oss'], function (oss) {
                var uploader = oss.upload({
                    //容器
                    container: 'container',
                    //文件选择按钮
                    pick: 's'+video.sid,
                    //开始上传按钮
                    upButton: 'p'+video.sid,
                    //获取签名,留下问号
                    serverUrl: '{{route('oss')}}?',
                    //上传目录
                    dir: 'houdunren/',
                    //local_name本地文件名 random_name随机文件名
                    name_type: 'random_name',
                    //允许上传类型
                    filters: {
                        //文件类型
                        mime_types: [
                            //只允许上传图片和zip,rar文件
                            {title: "Image files", extensions: "jpg,gif,png,bmp,jpeg"},
                            {title: "Zip files", extensions: "zip,rar"},
                            {title: "Video", extensions: "mp4"}
                        ],
                        //最大只能上传10mb的文件
                        max_file_size: '1000mb',
                        //不允许选取重复文件
                        prevent_duplicates: true
                    },
                    event: {
                        //选择文件
                        select: function (file) {
                            $('h1').html('0%');
                        },
                        //开始上传
                        start: function (up, file) {
                            console.log('开始上传');
                        },
                        progress: function (up, file) {
                            //上传进度
                            $('h1').html('<span>' + file.percent + "%</span>");
                        },
                        success: function (up, file, info) {
                            file.name = "https://hd92.oss-cn-beijing.aliyuncs.com/" + file.name;
                            video.path = file.name

                            // $("[name='file']").val(file.name);
                            // $('.thumbnail img').attr('src', file.name);
                        },
                        error: function (up, file, info) {
                            alert(info.response);
                        }
                    }
                });
            })
        }
    </script>





    {{--<h1>测试oss上传</h1>--}}
    {{--<div id="container">--}}
        {{--<div class="row">--}}
            {{--<div class="col-sm-6 col-md-4">--}}
                {{--<div class="thumbnail">--}}
                    {{--<img src="">--}}
                    {{--<h1 class="text-center"></h1>--}}
                    {{--<div class="caption">--}}
                        {{--<div class="btn-group">--}}
                            {{--<button type="button" class="btn btn-default" id="selectfiles">选择文件--}}
                            {{--</button>--}}
                            {{--<button type="button" class="btn btn-default" id="postfiles">开始上传--}}
                            {{--</button>--}}
                        {{--</div>--}}
                    {{--</div>--}}
                {{--</div>--}}
            {{--</div>--}}
        {{--</div>--}}
    {{--</div>--}}
    {{--<script>--}}
        {{--require(['oss'], function (oss) {--}}
            {{--var uploader = oss.upload({--}}
                {{--//容器--}}
                {{--container: 'container',--}}
                {{--//文件选择按钮--}}
                {{--pick: 'selectfiles',--}}
                {{--//开始上传按钮--}}
                {{--upButton: 'postfiles',--}}
                {{--//获取签名,留下问号--}}
                {{--serverUrl: '{{route('oss')}}?',--}}
                {{--//上传目录--}}
                {{--dir: 'houdunren/',--}}
                {{--//local_name本地文件名 random_name随机文件名--}}
                {{--name_type: 'random_name',--}}
                {{--//允许上传类型--}}
                {{--filters: {--}}
                    {{--//文件类型--}}
                    {{--mime_types: [--}}
                        {{--//只允许上传图片和zip,rar文件--}}
                        {{--{title: "Image files", extensions: "jpg,gif,png,bmp,jpeg"},--}}
                        {{--{title: "Zip files", extensions: "zip,rar"},--}}
                        {{--{title: "Video", extensions: "mp4"}--}}
                    {{--],--}}
                    {{--//最大只能上传10mb的文件--}}
                    {{--max_file_size: '10mb',--}}
                    {{--//不允许选取重复文件--}}
                    {{--prevent_duplicates: true--}}
                {{--},--}}
                {{--event: {--}}
                    {{--//选择文件--}}
                    {{--select: function (file) {--}}
                        {{--$('h1').html('0%');--}}
                    {{--},--}}
                    {{--//开始上传--}}
                    {{--start: function (up, file) {--}}
                        {{--console.log('开始上传');--}}
                    {{--},--}}
                    {{--progress: function (up, file) {--}}
                        {{--//上传进度--}}
                        {{--$('h1').html('<span>' + file.percent + "%</span>");--}}
                    {{--},--}}
                    {{--success: function (up, file, info) {--}}
                        {{--file.name = "https://hd92.oss-cn-beijing.aliyuncs.com/" + file.name;--}}
                        {{--$("[name='file']").val(file.name);--}}
                        {{--$('.thumbnail img').attr('src', file.name);--}}
                    {{--},--}}
                    {{--error: function (up, file, info) {--}}
                        {{--alert(info.response);--}}
                    {{--}--}}
                {{--}--}}
            {{--});--}}
        {{--})--}}
    {{--</script>--}}


@endsection